import React, { Component } from "react";
import { connect } from "react-redux";
import Header from "../../components/Header/Header";
import { Input, Button } from "antd-mobile";
import { actions, getUser } from "../../store/modules/login";
import { bindActionCreators } from "redux";
export class Login extends Component {
  render() {
    let {
      user,
      login: { changeUser, reqLogin },
      history: { push },
    } = this.props;
    return (
      <div className="register">
        <Header text="登录" register></Header>
        <div>user:{JSON.stringify(user)}</div>
        <div className="input-wrapper">
          <div className="label">手机号</div>
          <Input
            placeholder="请输入手机号"
            clearable
            onChange={(e) => changeUser("phone", e)}
          />
        </div>
        <div className="input-wrapper">
          <div className="label">密码</div>
          <Input
            placeholder="请输入密码"
            clearable
            onChange={(e) => changeUser("password", e)}
          />
        </div>
        <div className="text-center">
          <Button color="primary" onClick={() => reqLogin(push)}>
            登录
          </Button>
        </div>
      </div>
    );
  }
}

const mapStateToProps = (state) => ({
  user: getUser(state),
});

const mapDispatchToProps = (dispatch) => {
  return {
    login: bindActionCreators(actions, dispatch),
  };
};

export default connect(mapStateToProps, mapDispatchToProps)(Login);
